<template>
  <div>
    <page-header-wrapper>
      <a-card :bordered="false">
        <!-- 组件选择区域start -->
        <div class="left-component">
          <div class="left-box">
            <span
              style="cursor: pointer"
              @click="addComponent(ele)"
              v-for="ele in DraggableComponents"
              :key="ele.type"
              class="text-img-box"
            >
              <!--<a-icon :type="ele.icon" />-->
              <icon-font :type="ele.icon" />
              <span v-text="ele.title"></span>
            </span>
          </div>
        </div>
        <!-- 组件选择区域end -->

        <!-- 属性区域start -->
        <div class="attribute">
          <keep-alive>
            属性区域
            <component
              @error="validError"
              :ref="`${selected.id}-props`"
              v-if="selected"
              v-bind.sync="props"
              :is="`draggable-${selected.type}-props`"
              :key="`${selected.id}-props`"
            />
          </keep-alive>
        </div>
        <!-- 属性区域end -->

        <!-- 拖拽区域start -->
        <div class="drag-drop">
          <div class="drag-box">
            <div class="header">555555</div>
            <draggable :list="myArray" group="people" @start="drag = true" @end="drag = false">
              <div
                class="draggable-box"
                @click="selectedComponent(element)"
                :class="['draggable-div', selected && selected.id === element.id ? 'clicked' : '']"
                v-for="element in myArray"
                :key="element.id"
              >
                <component :is="`draggable-${element.type}`" v-bind="element.props" />
                <div class="componentdec">
                    {{element.title}}
                </div>
                <span class="iconfont icon-shanchu" @click.stop="removeComponent(element.id)"></span>
              </div>
            </draggable>
          </div>
        </div>
        <!-- 拖拽区域end -->
      </a-card>
      <footer-toolbar>
        <a-button @click="handleSubmit">提交</a-button>
      </footer-toolbar>
    </page-header-wrapper>
  </div>
</template>
<script>
  import { FooterToolbar } from '@/components'
  import cloneDeep from 'lodash.clonedeep'
  import draggable from 'vuedraggable'
  import { v4 as uuid4 } from 'uuid'
  import DraggableComponents from '@/components/Draggable/Constants'
  export default {
    name: 'DraggableTest',
    components: {
      draggable,
      FooterToolbar,
      DraggableSearch: () => import('@/components/Draggable/DraggableSearch'),
      DraggableSearchProps: () => import('@/components/Draggable/DraggableSearchProps'),
      DraggableNotice: () => import('@/components/Draggable/DraggableNotice'),
      DraggableNoticeProps: () => import('@/components/Draggable/DraggableNoticeProps'),
      DraggableImage: () => import('@/components/Draggable/DraggableImage'),
      DraggableImageProps: () => import('@/components/Draggable/DraggableImageProps'),
      DraggableProduct: () => import('@/components/Draggable/DraggableProduct'),
      DraggableProductProps: () => import('@/components/Draggable/DraggableProductProps'),
      DraggableRubikSCube: () => import('@/components/Draggable/DraggableRubikSCube'),
      DraggableRubikSCubeProps: () => import('@/components/Draggable/DraggableRubikSCubeProps'),
      DraggableNavBar: () => import('@/components/Draggable/DraggableNavBar'),
      DraggableNavBarProps: () => import('@/components/Draggable/DraggableNavBarProps'),
      DraggableSwipe: () => import('@/components/Draggable/DraggableSwipe'),
      DraggableSwipeProps: () => import('@/components/Draggable/DraggableSwipeProps')
    },
    data () {
      return {
        DraggableComponents,
        selected: undefined,
        propComp: '',
        myArray: [],
        props: {},
        errors: {},
        oSelectedId: ''
      }
    },
    methods: {
      addComponent (ele) {
        const {
          myArray,
          selectedComponent
        } = this
        const component = cloneDeep(ele)
        const id = uuid4()
        component.id = id
        myArray.push(component)
        selectedComponent(component)
      },
      removeComponent (id) {
        const {
          myArray
        } = this
        const index = myArray.findIndex(c => c.id === id)
        if (index !== -1) {
          myArray.splice(index, 1)
          if (this.selected.id === id) {
            this.oSelectedId = ''
            this.props = {}
            this.selected = undefined
            this.propComp = ''
          }
        }
      },
      editProps (ele) {
        this.props = ele.props
      },
      // 收集属性组件中的错误信息
      validError (err) {
        const { errors, selected } = this
        if (!err) {
          delete errors[selected.id]
        } else {
          errors[selected.id] = true
        }
      },
      selectedComponent (comp) {
        this.oSelectedId = this.oSelectedId ? this.selected.id : comp.id
        this.selected = comp
        this.editProps(comp)
        this.propComp = `draggable-${comp.type}-props`
      },
      handleSubmit () {
        const { myArray, selectedComponent, errors } = this
        // 错误校验
        for (const id in errors) {
          const ele = myArray.find(c => c.id === id)
          selectedComponent(ele)
          return
        }
        // todo  保存操作
      }
    },
    watch: {
      props: {
        deep: true,
        handler (nVal, oVal) {
          const { oSelectedId, selected } = this
          if (oSelectedId === (selected && selected.id)) {
            selected.props = nVal
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.draggable-div {
  &:hover {
    border: 1px dashed #00a0e9;
    .icon-shanchu{
      display: block;
      position: absolute;
      right: -30px;
      padding: 5px;
      background: #ffffff;
    }
    .componentdec{
      display: none;
    }
  }
  &.clicked {
    border: 1px solid #00A0E9;
  }
}
.draggable-box{
  position: relative;
  display: flex;
  .icon-shanchu{
    display: none;
  }
  .componentdec{
    width: 80px;
    height: 30px;
    border: 1px solid #ffffff;
    position: absolute;
    right:-90px;
    top:7px;
    background: #ffffff;
    text-align: center;
    line-height: 30px;
  }
  .componentdec::before{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #ffffff;
    position: absolute;
    content: "";
    left:-20px;
    top:3px
  }
}

.left-component {
  float: left;
  width: 300px;
  border: 1px solid #ffffff;
  height: 800px;
  padding: 30px 14px 10px 14px;
  background: #ffffff;
  .left-box{
     display: flex;
  }
  .text-img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .anticon {
      font-size: 24px;
    }
  }
}
.attribute {
  width: 300px;
  float: right;
  border: 1px solid green;
  height: 800px;
}
.drag-drop {
  // border: 1px solid blue;
  overflow: hidden;
  padding: 50px 287px;
  background: #f8f8f8;
  height: 800px;
  .drag-box {
    border: 1px solid #f8f8f8;
    box-shadow: darkgrey 10px 10px 30px 5px;
    height: 800px;
    // background: #cccccc;
  }
  .header {
    width: 375px;
    background: #ffffff;
    height: 64px;
  }
}
</style>
